<template>
	<view class="destination">
		<!-- 内容 -->
		<view class="content">
			<!-- 两部分 -->
			<!-- 输入框 -->
			<view class="item">
				<image src="../../static/redaddress.png" mode=""></image>
				<input @input="handleInput" type="text" placeholder="请输入目的地">
				<!-- 取消按钮 -->
				<view class="cancel" @click="handleCancel">取消</view>
			</view>
			<!-- 列表查询 -->
			<view class="list">
				<view class="item" v-if="!list.length">
					<image src="../../static/address.png" mode=""></image>
					<view class="text">
						<view class="title">
							未选择目的地
						</view>
						<view class="desc">
							未选择目的地
						</view>
					</view>
				</view>
			</view>
			<view class="list" @click="toIndex(item)" v-for="item in list" :key="item.id">
				<!-- 列表李的每一项 -->
				<view class="item">
					<image src="../../static/address.png" mode=""></image>
					<view class="text">
						<view class="title">
							{{item.district}}
						</view>
						<view class="desc">
							{{item.name}}
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 在输入框输入关键字，根据关键字获取对应到提示列表，吧列表展示到页面上
	// 点击想要去的目的地，目的地相关的内容，回显首页中的目的地的那个位置

	import amapFile from "../../libs/amap-wx.js"

	export default {
		data() {
			return {
				myAmapFun: undefined,
				//用于存放提示列表
				list: []
			}
		},
		onLoad() {
			this.myAmapFun = new amapFile.AMapWX({
				key: "85208405250c458368d44bccd8104998"
			})
		},
		methods: {
			handleInput(e) {
				console.log(e.detail.value);
				// 拿到输入关键字
				let words = e.detail.value;
				// 根据关键字发请求获取相关的数据
				this.myAmapFun.getInputtips({
					keywords: words,
					success: (res) => {
						console.log('关键字相关的提示列表', res);
						// 把相关联的数据列表取回来渲染到页面上
						this.list = res.tips
					}
				})

			},
			toIndex(item) {
				console.log("当前点击的是", item);
				uni.setStorageSync('target', JSON.stringify(item))
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			handleCancel() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.destination {
		width: 100vw;
		height: 100vh;
		overflow: scroll;
		padding: 40rpx 20rpx;
		box-sizing: border-box;

		.content {
			box-shadow: 1px 1px 2px 2px #eee;
			content: 100%;


			image {
				width: 50px;
				height: 50px;
				margin-right: 40rpx;
			}


			.item {

				height: 120rpx;
				border-bottom: 1px solid #eee;
				display: flex;
				align-items: center;

				.input {
					flex: 1;
				}

				// .text {
				.desc {
					font-size: 28rpx;
					color: #aaa;
					margin-top: 8rpx;

				}

				.cancel {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: #ebebeb;
					color: #333;
					font-size: 30rpx;
					border-radius: 20rpx;
					box-shadow: 0 0 2rpx 2rpx #afafaf;
					margin-left: 60rpx;
				}

				// }


			}

			.list {
				height: calc(100%-120rpx);
				overflow: scroll;
			}
		}




	}
</style>